<!--
 * @Author: dxy 1776566541@qq.com
 * @Date: 2022-09-06 16:36:43
 * @LastEditors: dxy 1776566541@qq.com
 * @LastEditTime: 2022-09-06 20:39:18
 * @FilePath: \deng\src\views\goods\components\goodsattr.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="goods-wrap">
    <div class="goods-details">
      <div class="goods-header">
        <div class="goods-title">
          <p>Redmi K30 5G</p>
          <div class="goods-list">
            <ul>
              <li>
                <a href="javascript:;">概述</a>
              </li>
              <li>
                <a href="javascript:;">概述</a>
              </li>
              <li>
                <a href="javascript:;">概述</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="goods-main">
        <div class="goods-block">
          <div class="swiper">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="goodsimg in ProductPicture"
                :key="goodsimg.id"
              >
                <img :src="$target + goodsimg.product_picture" alt="" />
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
        </div>
        <div class="goods-content">
          <h1 class="goods-name">{{ goodsList.product_name }}</h1>
          <p class="goods-intro">
            {{ goodsList.product_intro }}
          </p>
          <p class="goods-store">小米自营</p>
          <div class="goods-price">
            <span>{{ goodsList.product_price }}</span>
            <span class="goods-del">
              {{ goodsList.product_selling_price }}</span
            >
          </div>
          <div class="goods-pro-list">
            <div class="goods-pro-wrap">
              <span class="goods-pro-name">{{ goodsList.product_name }}</span>
              <span class="goods-pro-price">
                <span> {{ goodsList.product_selling_price }}</span>
                <span class="goods-pro-del">
                  {{ goodsList.product_price }}
                </span>
              </span>
            </div>

            <p class="goods-price-sum">
              总计 : {{ goodsList.product_selling_price }}元
            </p>
          </div>
          <div class="goods-button">
            <button
              type="button"
              class="el-button shop-cart el-button--default"
            >
              <!----><!----><span>加入购物车</span></button
            ><button type="button" class="el-button like el-button--default">
              <!----><!----><span>喜欢</span>
            </button>
          </div>
          <div class="goods-pro-policy">
            <ul>
              <li><i class="el-icon-circle-check"></i> 小米自营</li>
              <li><i class="el-icon-circle-check"></i> 小米发货</li>
              <li><i class="el-icon-circle-check"></i> 7天无理由退货</li>
              <li><i class="el-icon-circle-check"></i> 7天价格保护</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper/bundle'
import 'swiper/css/bundle'

export default {
  name: 'GoodsAttr',
  watch: {
    ProductPicture: {
      immediate: true,
      handler(newval) {
        if (!newval.length) return
        this.$nextTick(() => {
          new Swiper('.swiper', {
            loop: true, // 循环模式选项
            autoplay: {
              delay: 2000,
              disableOnInteraction: false
            }, //自动轮播

            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              clickable: true //可以点击跳转
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            }
          })
        })
      }
    }
  },
  mounted() {
    this.$axios
      .post('/api/product/getDetails', {
        productID: this.$route.query.productID
      })
      .then((res) => {
        this.goodsList = res.data.Product[0]
        console.log(res)
      })
      .catch((err) => {
        return Promise.reject(err)
      })
    this.$axios
      .post('/api/product/getDetailsPicture', {
        productID: this.$route.query.productID
      })
      .then((res) => {
        this.ProductPicture = res.data.ProductPicture
        console.log(res)
      })
      .catch((err) => {
        return Promise.reject(err)
      })
  },
  data() {
    return {
      goodsList: [],
      ProductPicture: []
    }
  }
}
</script>

<style scoped>
.swiper {
  width: 560px;
  height: 560px;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
}
.goods-main {
  width: 1200px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
}
.goods-wrap {
  width: 100%;
  padding: 20px 0px;
}
.goods-header {
  width: 100%;
  height: 70px;
  box-shadow: 0px 5px 5px #eee;
}
.goods-title {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  line-height: 70px;
}
.goods-title {
  font-size: 18px;
  color: #212121;
}
.goods-list ul {
  display: flex;
}
.goods-list ul li {
  margin-left: 20px;
}
.goods-list ul li a {
  color: #616161;
  font-size: 14px;
  font-weight: 700;
}
.goods-list ul li a:hover {
  color: #ff6700;
}
.goods-content {
  width: 640px;
  margin-left: 20px;
}
.goods-name {
  font-size: 24px;
  font-weight: normal;
}
.goods-intro {
  color: #b0b0b0;
  padding-top: 10px;
}
.goods-store {
  color: #ff6700;
  padding-top: 10px;
}
.goods-price {
  padding: 25px 0;
  border-bottom: 1px solid #e0e0e0;
}
.goods-price span {
  font-size: 18px;
  color: #ff6700;
}
.goods-price .goods-del {
  color: #b0b0b0;
  font-size: 14px;
  margin-left: 10px;
  text-decoration: line-through;
}
.goods-pro-list {
  padding: 30px 60px;
  background: #f9f9fa;
  margin: 50px 0;
  color: #616161;
}
.goods-pro-list .goods-pro-wrap {
  display: flex;
  justify-content: space-between;
}
.goods-pro-list .goods-pro-wrap .goods-pro-del {
  margin-left: 10px;
  text-decoration: line-through;
}

.goods-price-sum {
  padding-top: 20px;
  font-size: 24px;
  color: #ff6700;
}
.goods-button {
  margin: 10px 0 20px 0;
}
.shop-cart {
  width: 340px;
  height: 55px;
  border: none;
  background-color: #ff6700;
}
.shop-cart:hover {
  background-color: #f25807;
}

.like {
  width: 260px;
  height: 55px;
  margin-left: 20px;
  border: none;
  background-color: #b0b0b0;
}
.like:hover {
  background-color: #757575;
}
.goods-button span {
  font-size: 16px;
  color: #fff;
}
.goods-pro-policy ul {
  display: flex;
  font-size: 16px;
  color: #b0b0b0;
}
.goods-pro-policy ul li {
  margin-right: 20px;
}
</style>
